<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";
import type { Dayjs } from "dayjs";
type RangeValue = [Dayjs, Dayjs];

const value5 = ref<string>("工单编号");
const value6 = ref<string>("");
const opts = ["工单编号"];

const value2 = ref<RangeValue>();

const dataSource = ref([
  {
    key: "1",
    no: 1,
    name: "Mike",
    status: "10",
    purchaseDate: "2022-02-24",
  },
]);

const columns = ref([
  {
    title: "工单编号",
    dataIndex: "no",
    key: "no",
  },
  {
    title: "问题内容",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "提交时间",
    dataIndex: "purchaseDate",
    key: "purchaseDate",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);

</script>
<template>
  <div class="pl-5 pr-5">
    <ProductBox title="我的工单">
      <div class="flex flex-wrap justify-between mb-5">
        <router-link to="/service/complain">
          <a-button type="primary" class="mb-5">提交工单</a-button>
        </router-link>
        <div class="w-125 mb-5">
          <a-input-group class="flex">
            <a-select v-model:value="value5">
              <a-select-option :value="opt" v-for="(opt, seq) in opts" :key="seq + 'opt'">
                {{ opt }}
              </a-select-option>
            </a-select>
            <a-input v-model:value="value6" style="flex: 1" />
          </a-input-group>
        </div>
        <div class="w-100">
          <a-range-picker v-model:value="value2" />
        </div>
      </div>
      <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <div class="flex">
              <a-button type="primary" class="mr-5">修改</a-button>
              <a-button type="primary" danger>删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped></style>
